<template>
  <view class="live_list">
    <view class="live_header">
      <view class="user_wrap">
        <img
          class="avatar"
          :src="userInfo.avatar"
          v-if="Object.keys(userInfo).length > 0"
        />
        <img class="avatar" :src="errorImage" v-else />
        <text class="shopname">邓波测试店铺</text>
      </view>
      <view class="person_wrap">
        <u-icon
          class="search_icon"
          name="search"
          size="24"
          @click="GotoSearchPage"
        ></u-icon>
        <text @click="userFollow">关注</text>
        <text class="division_line">|</text>
        <text @click="GotoPersonCenter">个人中心</text>
      </view>
    </view>
    <view class="live_wrap" v-if="courseList.length > 0">
      <view
        class="live_item"
        v-for="item in courseList"
        :key="item.id"
        @click="clickLive(item.id, item.type)"
      >
        <view class="picture">
          <img
            :src="item.cover"
            @error="tabErrorPicture('courseList', item.id)"
            alt=""
          />
        </view>
        <view class="message_intro">
          <view class="title">{{ item.title }}</view>
          <view class="message_footer">
            <view class="price_wrap">
              <text class="price">{{
                item.price == 0 ? "免费" : "￥" + item.price
              }}</text>
              <text class="oldPrice">{{
                item.marking_price == 0 ? "" : "￥" + item.marking_price
              }}</text>
            </view>
            <text class="recording">{{ item.view || 0 }}次观看</text>
          </view>
        </view>
      </view>
      <view class="noMore">没有更多数据了哦~~</view>
    </view>
    <u-empty
      mode="data"
      icon="http://cdn.uviewui.com/uview/empty/car.png"
      v-else
    ></u-empty>
  </view>
</template>

<script>
import { api_getColumnList } from "../../api/api";
export default {
  data() {
    return {
      courseList: [],
      total: 0,
      userInfo: {},
      errorImage: require("@/static/img/avatar.png"),
      errorProduct: require("@/static/img/default_image.jpg"),
    };
  },
  onLoad(options) {
    this.init(options);
  },
  created() {},
  methods: {
    init(opt) {
      // 页面初始化
      let query = {
        id: opt.id,
        status: 1,
        page: 1,
        limit: 10000,
      };
      uni.showLoading({ title: "数据加载中..." });
      api_getColumnList(query)
        .then((res) => {
          uni.hideLoading();
          console.log("aa", res);
          if (res.code == 1) {
            this.courseList = res.data.columndata;
            this.total = res.data.total;
          } else {
            uni.showToast({ title: res.msg, icon: "error" });
          }
        })
        .catch((err) => console.log(err));
    },
    clickLive(id, type) {
      // 短视频直播item项
      type == "column" &&
        uni.navigateTo({ url: `/pages/product/index?id=${id}&data_type=${type}` });
      type == "exam" &&
        uni.navigateTo({ url: `/pages/examcontent/index?id=${id}&data_type=${type}` });
    },
    GotoSearchPage() {
      //	搜索
      console.log("search");
      uni.navigateTo({ url: "/pages/searchList/index" });
    },
    userFollow() {
      // 关注
      console.log("user follow");
    },
    GotoPersonCenter() {
      // 个人中心
      uni.navigateTo({ url: "/pages/my/index" });
    },
    tabErrorPicture(name, id) {
      // 列表图片加载失败
      let i = this[name].findIndex((v) => v.id == id);
      this[name][i].cover = this.errorProduct;
    },
  },
};
</script>

<style lang="scss" scoped>
.live_list {
  padding: 0 0 20px;
  box-sizing: border-box;
  .live_header {
    display: flex;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #eee;
    padding: 0 10px;
    box-sizing: border-box;
    .user_wrap {
      display: flex;
      align-items: center;
      .avatar {
        display: block;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        margin: 0 10px 0 0;
      }
      .shopname {
        font-size: 14px;
      }
    }
    .person_wrap {
      display: flex;
      align-items: center;
      font-size: 12px;
      .search_icon {
        display: inline-block;
        margin: 0 5px 0 0;
        color: #ccc !important;
      }
      .division_line {
        display: inline-block;
        margin: 0 4px;
      }
    }
  }
  .live_wrap {
    .live_item {
      font-size: 12px;
      color: #323233;
      background-color: #fafafa;
      margin-top: 10px;
      padding: 5px 10px;
      box-sizing: border-box;
      display: flex;
      .picture {
        width: 100px;
        img {
          display: block;
          width: 100px;
          height: 100px;
        }
      }
      .message_intro {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0 0 0 10px;
        width: calc(100vw - 120px);
        box-sizing: border-box;
        .title {
          font-size: 15px;
        }
        .price_wrap {
          .price {
            font-size: 12px;
            color: red;
          }
          .oldPrice {
            font-size: 12px;
            text-decoration: line-through;
            margin: 0 0 0 10px;
            color: #969799;
          }
        }
        .message_footer {
          display: flex;
          justify-content: space-between;
        }
      }
    }
    .noMore {
      font-size: 14px;
      text-align: center;
      color: #ccc;
      margin: 20px 0 0;
    }
  }
}
</style>
